<template>
   <div class="app-coupon">
    <Query
      :items="queryColumns"
      :initial-params="queryParams"
      @query="handleQuery"
      labelWidth="120px"
    />
    <Table
      :table-columns="tableColumns"
      :table-loading="tableLoading"
      :table-data="tableData"
      :total="total"
      @pagination="handlePagination"
    >
      <template v-slot:tools>
        <el-button-group>
          <el-button type="primary" @click="handleAdd">添加优惠券</el-button>
        </el-button-group>
      </template>
      <template #opt="scope">
        <el-button type="primary" v-if="scope.row.status === 1" link @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="primary" v-if="scope.row.status === 1" link @click="handleSend(scope.row)">发放</el-button>
        <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </Table>
   </div>
</template>

<script setup name="couoon">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import { getCouponList, saveCoupon, pushCoupon } from "@/api/goods/index";
const { proxy } = getCurrentInstance()
const router = useRouter()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)

const formatterStatus = function(row){
  const obj = {
    1: '待发放',
    2: '已发放',
    3: '已过期'
  }
  return obj[row.status]
}
const formatterDisType = function(row){
  const obj = {
    1: '减免',
    2: '打折',
    3: '现金抵扣'
  }
  return obj[row.disType]
}
const data = reactive({
  tableColumns: [
    { label: "优惠券名称", prop: "title" },
    { label: "优惠券类型", prop: "disType", formatter: formatterDisType },
    { label: "使用规则", prop: "useNum", formatter: row => { return row.useNum === 1 ? '单次' : '不限'} },
    { label: "创建时间", prop: "gmtCreate"},
    { label: "优惠券状态", prop: "status", formatter: formatterStatus },
    { label: "发放时间", prop: "gmtPush"},
    { label: "有效期至", prop: "gmtPushEnd"},
    { label: "操作", slot: 'opt' }
  ],
  queryColumns: [
   { label: "优惠券名称", prop: "title", type: 'input', attrs: { placeholder: '请输入优惠券名称'} },
   { label: "优惠券类型", prop: "disType", type: 'select', options: [{ label: '减免', value: 1 }, { label: '打折', disabled: true, value: 2 }, { label: '现金抵扣', value: 3 }] },
   { label: "优惠券状态", prop: "status", type: 'select',  options: [{ label: '待发行', value: 1 }, { label: '已发行', value: 2 }, { label: '已过期', value: 3 }] },
   { label: "发放时间", prop: "pushTime",type: 'datetime',  attrs: { type: 'datetimerange',  endPlaceholder: '请选择', startPlaceholder: '请选择', valueFormat: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss'} },
   { label: "有效期至", prop: "overTime", type: 'datetime',attrs: { type: 'datetimerange',  endPlaceholder: '请选择', startPlaceholder: '请选择', valueFormat: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss'}},
  ],
  pageParams: {
   current: 1,
   size: 10
  },
  queryParams: {}
})

const { tableColumns, queryColumns, pageParams, queryParams  } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
   tableLoading.value = true
   const data  = {
      ...queryParams.value,
      ...pageParams.value
   }
   if (data.overTime && data.overTime.length > 0) {
    data.overBeginTime = data.overTime[0]
    data.overEndTime = data.overTime[1]
   }
   if (data.pushTime && data.pushTime.length > 0) {
    data.pushBeginTime = data.pushTime[0]
    data.pushEndTime = data.pushTime[1]
   }
   delete data.overTime
   delete data.pushTime
   getCouponList(data)
   .then(res => {
      tableData.value = res.data.records
      total.value = res.data.total
   })
   .finally(() => {
      tableLoading.value = false
   })
}
getList()

/** 搜索按钮操作 */
const handleQuery = (val) => {
  queryParams.value = val
  getList()
}
/** 打开新增弹窗 */
const handleAdd = () => {
  router.push('/operation/addCoupon')
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
router.push({
  path: '/operation/addCoupon',
  query: {
    id: row.id
  }
})
}

function handleSend (row) {
  proxy.$modal.confirm('确定发放该优惠券').then(function() {
    pushCoupon({ id: row.id }).then(() => {
      getList()
      proxy.$modal.msgSuccess("发放成功")
    })
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveCoupon({id: row.id, delFlag: -1}).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
  })
}
const handlePagination = (val) => {
  pageParams.value = val
  getList()
}

</script>
<style lang="scss">
.app-coupon {
  padding: 8px;
}
</style>